<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="app">
      <div class="area">
        <h2>提问区</h2>
        <ul>
          <li v-for="item in questionList">
            <h3>{{item.title}}</h3>
            <div v-if="item.type==='short'"><input type="text" v-model="name"/></div>
            <div v-for="value in item.chooseList" :key="value">
                <input v-if="item.type=='single'" type="radio" :value="value" v-model="sex"/>
                <input v-if="item.type=='multiple'" type="checkbox" :value="value" v-model="hobby" />
                <span>{{value}}</span>
            </div>
            <div><textarea v-if="item.type==='long'" v-model="introduce"></textarea></div>
          </li>
        </ul>
      </div>
      <div class="area">
        <h2>回答展示区</h2>
        <ul>
          <li>
            <h3>1.请问你的姓名是？</h3>
            <div><span>{{name}}</span></div>
          </li>
          <li>
            <h3>2.请问您的性别是？</h3>
            <div><span>{{sex}}</span></div>
          </li>
          <li>
            <h3>3. 请选择您的兴趣爱好：</h3>
            <div><div>{{hobby.join(",")}}</div></div>
          </li>
          <li>
            <h3>4. 请介绍一下自己:</h3>
            <div><span>{{introduce}}</span></div>
          </li>
        </ul>
      </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>

    <script>
      var questionList = [
       { 
          type: "short",    // 类型  short 对应 input text
          title: "1.请问你的姓名是？",
          chooseList: null,
          id: 0,
        },
        {
          type: "single",   // 单选框 radio
          title: "2.请问您的性别是？",
          chooseList: ["男", "女", "保密"],
          id: 1,
        },
        {
          type: "multiple",  // checkbox
          title: "3. 请选择您的兴趣爱好：",
          chooseList: ["看书", "游泳", "跑步", "看电影", "听音乐"],
          id: 2,
        },
        {
          type: "long",   // textarea
          title: "4. 请介绍一下自己:",
          chooseList: null,
          id: 3,
        },
      ];

      var vm = new Vue({
          el: "#app",
          data: {
              questionList,
              name:"",
              sex: "",
              hobby: [],
              introduce: ""
          }
      })
    </script>
  </body>
</html>